<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
		body {
			--mboder: 1px solid red;
		}

		ul {
			list-style: none
		}

		* {
			margin: 0;
			padding: 0;
		}

		.dd {
			margin: 50px auto;
			overflow: hidden;
		}

		.dd>ul>li {
			height: 100%;
			float: left;
			transition: all .5s;
			background-position: center;
		}

		.dd>ul {
			display: flex;
			flex-wrap: nowrap;
			border: var(--mboder);
		}
	</style>
	<script src="jquery.js"></script>
</head>

<body>
	<div id="dd" class="dd">
	</div>
	<div id="dd1" class="dd">
	</div>
	<script>
		$.fn.Accordion = function (images) {
			function bannerGo(obj) {
				this.addDom(obj);
				this.boxWidth = 1200;
				this.hoverWidth = images.length > 1 ? 800 : this.boxWidth;
				this.height = 400;
				this.obj = obj.find('ul');
				this.setClass();
				this.mouseOver();
				this.mouseOut();
				this.timer();
				this.pageOut();
			}
			bannerGo.prototype = {
				constructor: bannerGo,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
				addDom: function (obj) {//添加元素
					let a = '';
					for (let i = 0; i < images.length; i++) {
						a += '<li></li>'
					}
					obj.append("<ul>" + a + "</ul>");
				},
				setClass: function () {//设置样式
					let len = this.obj.find('li').length, that = this, liIndex = 0;
					this.obj.css({ 'height': this.height + 'px', 'width': this.boxWidth + 'px' });
					this.obj.find('li').each(function () {
						$(this).css({
							'width': that.boxWidth / len + 'px',
							'background-image': 'url(' + (images[liIndex]) + ')',
							'background-size': '' + this.hoverWidth + 'px 400px'
						});
						liIndex++;
					});
				},
				animateGo: function (mHover, dom) {//执行帧动画
					this.letGo = function (heihei) {//执行所有li的动画
						this.obj.find('li').each(function () {
							$(this).stop();
							$(this).animate({ 'width': '' + heihei + 'px' }, 200);
						});
					}
					if (mHover === 'in') {//执行单个li的动画
						this.letGo((this.boxWidth - this.hoverWidth) / (this.obj.find('li').length - 1));
						dom.stop();
						dom.animate({ 'width': this.hoverWidth + 'px' }, 200);
					} else {
						this.letGo(this.boxWidth / this.obj.find('li').length)
					}
				},
				mouseOver: function () {//鼠标移入
					let that = this;
					this.obj.find('li').mouseover(function () {
						console.log($(this))
						clearInterval(that.mTimer);
						that.animateGo('in', $(this));
					});
				},
				mouseOut: function () {//鼠标移出
					let that = this;
					this.obj.find('li').mouseout(function () {
						that.timer();
						that.animateGo('out', $(this));
					});
				},
				timer: function () {//时间
					let that = this;
					that.index = 0;
					that.mTimer = setInterval(function () {
						that.animateGo('in', that.obj.find('li:eq(' + that.index + ')'));
						that.index++;
						if (that.index >= that.obj.find('li').length) {
							that.index = 0;
						}
					}, 1000);
				},
				pageOut:function(){//判断当前页面是否离开
					var that=this;
					var hiddenProperty = 'hidden' in document ? 'hidden' :'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;
					var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
					var onVisibilityChange = function(){
						if (!document[hiddenProperty]) { 
							clearInterval(that.mTimer);
						}else{
							that.timer();
						}
					}
					document.addEventListener(visibilityChangeEvent, onVisibilityChange);
				}
			}
			new bannerGo($(this));
		}
		let images = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg', './images/5.jpg', './images/2.jpg'];
		let images1 = ['./images/1.jpg', './images/2.jpg']
		$("#dd").Accordion(images);
		$("#dd1").Accordion(images1);
	</script>
</body>

</html>